import React from 'react';
import { CSSTransition } from 'react-transition-group'
import * as actions from '../../actions'
import { connect } from 'react-redux'
import {
    HeaderWrapper,
    HeaderLimit,
    HeaderContent,
    HeaderLogo,
    HeaderBtn,
    Nav,
    Search,
    SearchContainer,
    SearchIcon
} from './Header.js'
const Header = (props) => {
    return (
        <HeaderWrapper>
            <HeaderLimit>
                <HeaderLogo></HeaderLogo>
                <HeaderContent>
                    <Nav className='fl left first'>首页</Nav>
                    <Nav className='fl left'>
                        <i className="iconfont">&#xe617;</i>
                        下载App
                    </Nav>
                    <SearchContainer>
                        <CSSTransition
                            in={ props.inputFocus }
                            timeout={500}
                            classNames='fade'
                        >
                            <Search className={ props.inputFocus ? 'focused' : ''} onFocus={props.doFocus} onBlur={props.doBlur}></Search>
                        </CSSTransition>
                        <SearchIcon className={ props.inputFocus ? 'focusedIcon' : ''}>
                            <i className="iconfont">&#xe611;</i>
                        </SearchIcon>
                    </SearchContainer>
                    <Nav className='fr right'>登录</Nav>
                    <Nav className='fr right'>
                        <i className="iconfont">&#xe636;</i>
                    </Nav>
                </HeaderContent>
                <HeaderBtn className='btn-reg'>注册</HeaderBtn>
                <HeaderBtn className='btn-write'>
                    <i className="iconfont" style={{marginRight: '4px'}}>&#xe678;</i>
                    写文章
                </HeaderBtn>
            </HeaderLimit>
        </HeaderWrapper>
    )
}

export default connect(
    (state) => ( { inputFocus: state.inputFocus } ),
    (dispatch) => ({
        doFocus () {
            dispatch(actions.focusInput())
        },
        doBlur () {
            dispatch(actions.blurInput())
        }
    })
)(Header)